<template>
    <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="统计日期：" prop="date">
            <el-date-picker v-model="date" type="daterange" format="yyyy-MM-dd" @change="changeDate"
            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
         
          <el-form-item label="角色：" prop="roleType">
            <el-select v-model="queryParams.roleType" placeholder="请选择" @change="roleChange" style="width: 240px;">
              <el-option v-for="item in roleOptions" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：" prop="userId">
            <el-select v-model="queryParams.userId" placeholder="请选择" filterable style="width: 240px;">
              <el-option v-for="item in nameOptions" :key="item.id" :label="item.name + '-' + item.phone" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
            <export-excel-button title="直播提成数据" action="/live/import/data/commission/list/export" :params="queryParams" />
        </div>
        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="角色" align="center" prop="role"></el-table-column>
          <el-table-column label="姓名" align="center" prop="name"></el-table-column>
          <el-table-column label="直播场次" align="center" prop="liveSession"></el-table-column>
          <el-table-column label="直播时长" align="center" prop="liveDuration"></el-table-column>
          <el-table-column label="支付GMV" align="center" prop="payGmv"></el-table-column>
          <el-table-column label="支付券数" align="center" prop="payOfCoupons"></el-table-column>
          <el-table-column label="核销GMV" align="center" prop="writeOffGmv"></el-table-column>
          <el-table-column label="退款GMV" align="center" prop="refundGmv"></el-table-column>
          <el-table-column label="核销券数" align="center" prop="writeOffOfCoupons"></el-table-column>
          <el-table-column label="退款券数" align="center" prop="refundOfCoupons"></el-table-column>
          <el-table-column label="服务商佣金" align="center" prop="serviceCommission"></el-table-column>
          <el-table-column label="提成" align="center" prop="commission"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" style="width: 240px;">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="lookDetail(scope.row)"  v-if="scope.row.clientId != '-'">直播明细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
  
      <!-- 直播明细 -->
      <LiveDetailDialog v-if="dialogVisible" :id="dialogId" :date="date" :visible.sync="dialogVisible"
        @success="_handleSuccess">
      </LiveDetailDialog>
    </div>
  </template>
  
  <script>
  import {
    userSelectLs,commissionLs
  } from "@/api/customer/serviceData";
  import LiveDetailDialog from "./components/liveDetailDialog";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    name: "",
    components: {
      LiveDetailDialog,
      ExportExcelButton
    },
    data() {
      return {
        dialogId: '',
        dialogVisible: false,
        watchVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        //表格数据
        tabList: [],
        date: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          beginTime: '',//创建开始时间
          endTime: '',//创建结束时间
          roleType: '',//角色类型 1 主播 2 中控
          userId: '',//角色id
        },
        roleOptions:[],//角色下拉
        nameOptions:[],//姓名下拉
        responsiblePersonList: [],
      };
    },
    computed: {
  
    },
    created() {
      this.getDict()
      this.getUsetLs()
      this.getList();
    },
    methods: {
       //获取字典
      getDict() {
        var dictType = "live_user_role_type";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.roleOptions = arr.concat(res.result[0].dictList);
          })
          .catch(() => {});
      },
      // 角色选择
      roleChange(){
        this.getUsetLs(this.queryParams.roleType)
      },
      //日期选择
      changeDate(){
        this.handleQuery()
      },
      //直播人员下拉框
      getUsetLs(type) {
        let data = {
          type:type
        }
        userSelectLs(data).then((res) => {
          this.queryParams.userId = ''
          this.nameOptions = res.result
        })
      },
      /** 查询列表 */
      getList() {
        var data = this.queryParams
        // let data = JSON.parse(JSON.stringify(this.queryParams));  //深拷贝
        // data.personIds = data.personIds.toString()
        this.loading = true;
        commissionLs(data).then(response => {
          this.tabList = response.result.records;
          // this.tabList = this.tabList.map(item => {
          //   Object.keys(item).forEach(key => {
          //     if (item[key] === '') {
          //       item[key] = '-'
          //     }
          //   })
          //   return item
          // })
          this.total = response.result.total;
          this.loading = false;
        }).catch(()=>{
          this.loading = false
        })
      },
      
      // 表单重置
      reset() {
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          beginTime: '',//创建开始时间
          endTime: '',//创建结束时间
          roleType: '',//角色类型 1 主播 2 中控
          userId: '',//角色id
        };
        this.getUsetLs(this.queryParams.roleType)
        this.resetForm("queryParams");
        this.handleQuery()
      },
      //客户详情
      lookDetail(row) {
        this.dialogId = row.uid
        this.dialogVisible = true;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.date.length>0){
          this.queryParams.beginTime = this.date[0];
          this.queryParams.endTime = this.date[1];
        }else{
          this.queryParams.beginTime = ''
          this.queryParams.endTime = ''
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
      },
      _handleSuccess(e) {
        //成功回调
        this.resetQuery()
      },
    }
  };
  
  </script>
  <style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  
  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 20px 0;
  }
  </style>
  